/**
 * 侧边栏组件 - 使用 Element UI
 */
const Sidebar = {
    name: 'Sidebar',
    props: {
        currentFeature: {
            type: String,
            default: null
        }
    },
    emits: ['select-feature'],
    data() {
        return {
            menuItems: [
                { 
                    id: 'chat', 
                    label: '智能对话', 
                    description: '与AI进行多轮对话',
                    icon: 'el-icon-chat-line-round'
                },
                { 
                    id: 'generate-image', 
                    label: '生成图片', 
                    description: '根据描述生成图片',
                    icon: 'el-icon-picture'
                },
                { 
                    id: 'generate-video', 
                    label: '生成视频', 
                    description: '根据描述生成视频',
                    icon: 'el-icon-video-camera'
                },
                { 
                    id: 'text-to-speech', 
                    label: '文字转语音', 
                    description: '将文字转换为语音',
                    icon: 'el-icon-headset'
                },
                { 
                    id: 'settings', 
                    label: '模型与参数设置', 
                    description: '配置全局模型和参数并保存到数据库',
                    icon: 'el-icon-setting'
                }
            ]
        };
    },
    methods: {
        handleClick(featureId) {
            // 如果点击的是当前选中的功能，则取消选择
            if (this.currentFeature === featureId) {
                this.$emit('select-feature', null);
            } else {
                this.$emit('select-feature', featureId);
            }
        }
    },
    template: `
        <el-menu
            :default-active="currentFeature"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            style="width: 240px; height: 100vh;"
        >
            <div style="padding: 20px; text-align: center; border-bottom: 1px solid #434a50;">
                <h2 style="margin: 0; font-size: 18px; color: #ffffff;">AI 功能体验</h2>
            </div>
            <el-menu-item 
                v-for="item in menuItems" 
                :key="item.id"
                :index="item.id"
                @click="handleClick(item.id)"
            >
                <i :class="item.icon"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>
        </el-menu>
    `
};
